<!--
 * @Author: 赵宇
 * @Description: 
 * @Date: 2024-02-27 14:59:03
 * @LastEditTime: 2024-07-24 09:56:27
 * @LastEditors: zhao 13370229059@163.com
 * @FilePath: \dance\pages\me\components\collectvideo.vue
-->
<template>
  <view class="collect">
    <view v-for="(item, index) in ajax.list" :key="item.id" class="card" @click="onGoVideo(item)">
      <!-- <text class="card-name" v-if="item.title">{{ item.title }}</text> -->
      <view class="card-cover">
        <view class="card-cover-image">
          <uv-image
            :src="isFileType(item.address) === 'image' ? item.address : item.cover || defaultImagesList[$uv.random(0, defaultImagesList.length - 1)]"
            height="100%"
            width="100%"
          ></uv-image>
        </view>
      </view>
      <view class="card-image">
        <text class="name">{{ item.title }}</text>
        <text class="username">{{ item?.teacher?.username || '无' }}</text>
        <view class="image">
          <uv-avatar :src="item?.teacher?.profilePhoto || defaultImages[2]" size="85rpx" mode="aspectFill"></uv-avatar>
        </view>
      </view>
    </view>
    <view v-if="ajax.list.length === 0" class="empty">
      <view class="empty-text">还没有收藏的视频</view>
    </view>
    <!-- <view class="collect-button" @click.stop="onGoRegisterTeacher">
      <uv-icon class="icon" name="plus" color="#fff" size="28rpx"></uv-icon>
      <text class="collect-button-text">老师入驻</text>
    </view> -->
    <uv-toast ref="toastRef"></uv-toast>
    <uv-safe-bottom></uv-safe-bottom>
  </view>
</template>

<script setup>
import { ref, reactive, defineProps, watch, defineEmits, defineExpose } from 'vue';
import { isFileType, getPercentage } from '@/common/js/fn.js';
import { defaultImages, defaultImagesList } from '@/common/js/global.js';
let initShow = ref(false);
const toastRef = ref();

let params = reactive({
  pageSize: 10,
  currentPage: 1,
  classify: 'Video',
  sort: 0,
});

// 初始化解决日期选项
let ajax = reactive({
  list: [],
});
let props = defineProps({
  current: {
    type: Number,
    default: 0,
  },
});
const httpMineCollect = async (reset = false) => {
  let options = JSON.parse(JSON.stringify(params));
  options.orderBy = ['Video', params.sort ? 'asc' : 'desc'];
  let data = await uni.$uv.http.post('/app/collect/videos', options);
  if (reset) {
    ajax.list.splice(0, ajax.list.length, ...data.vidoes);
  } else {
    ajax.list.push(...data.vidoes);
  }
};
// 触发子组件更新事件
const sonChange = ({ type, sort }) => {
  if (type == 'scrollDown') {
    params.currentPage++;
    httpMineCollect();
  } else if (type === 'search') {
    params.currentPage = 1;
    httpMineCollect(true);
  } else if (type === 'sort') {
    params.currentPage = 1;
    params.sort = sort;
    httpMineCollect(true);
  }
};
defineExpose({ sonChange });

let httpCollect = async (item, index) => {
  await uni.$uv.http.post(`app/collect/cancel`, {
    classify: 'Video', //收藏类型
    objid: item.id, //收藏对象的数据ID
    optype: 'collect', //操作类型
  });
  ajax.list.splice(index, 1);
  toastRef.value.show({
    overlay: false,
    message: `取消收藏成功`,
    type: 'success',
  });
};
// 查看视频
const onGoVideo = val => {
  uni.$uv.route({
    url: '/pages/teacher/videoPreview',
    params: {
      id: val.id,
    },
  });
};
// 注册老师
const onGoRegisterTeacher = () => {
  uni.$uv.route({
    url: '/pages/teacher/register',
  });
};
</script>

<style lang="scss" scoped>
.collect {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  min-height: 100%;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;

  .empty {
    color: #808080;
    font-size: 26rpx;
    width: 100%;
    &-text {
      text-align: center;
      margin-top: 80rpx;
      border-bottom: 1px solid #545454;
      padding-bottom: 49rpx;
    }
  }
  .card {
    display: flex;
    flex-wrap: wrap;
    height: 551rpx;
    font-size: 24rpx;
    width: 49%;
    border-radius: 4px;
    position: relative;
    margin-bottom: 49rpx;
    padding-left: 17rpx;
    box-sizing: border-box;
    &-name {
      position: absolute;
      left: 13rpx;
      bottom: 17rpx;
      background-color: #1d1f24;
      padding: 9rpx 24rpx;
      border-radius: 24rpx;
      color: #fff;
      z-index: 1;
    }
    &-cover {
      position: relative;
      // margin-bottom: 12rpx;
      width: 100%;
      &-video {
        border-radius: 17rpx;
        overflow: hidden;
        height: 100%;
        width: 100%;
      }
      &-image {
        border-radius: 17rpx;
        overflow: hidden;
        width: 100%;
        height: 485rpx;
      }
      &-shoucang {
        position: absolute;
        right: 16rpx;
        top: 26rpx;
        width: 45rpx;
        height: 45rpx;
      }

      &-progress {
        position: absolute;
        top: -14rpx;
        left: -30rpx;
        width: 160rpx;
        height: 160rpx;
        border-radius: 50%;
      }
    }
    &-video {
      width: 100%;
      height: 161rpx;
      position: absolute;
      bottom: 0;
      // background: rgba(0, 0, 0, 0.5);
      // opacity: 1;
      // border-radius: 43% 48% 5% 4% / 30% 31% 10% 12%;
      // display: flex;
      // flex-direction: column;
      // justify-content: center;
      // align-items: center;

      .popup {
        width: 100%;
        height: 163rpx;
        border-bottom-right-radius: 17rpx;
        border-bottom-left-radius: 17rpx;
        overflow: hidden;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      .popup:after {
        width: 120%;
        height: 100%;
        position: absolute;
        left: -10%;
        top: 0;
        content: '';
        border-radius: 50% 50% 0 0;
        background: rgba(0, 0, 0, 0.5);
        opacity: 1;
      }

      .week {
        display: block;
        font-size: 28rpx;
        font-weight: 700;
        z-index: 2004;
        margin-top: 10rpx;
        text-shadow: 0px 2rpx 7rpx rgba(0, 0, 0, 0.5);
      }
      .lesson {
        text-shadow: 0px 2rpx 7rpx rgba(0, 0, 0, 0.5);
        margin-top: 10rpx;
        font-size: 28rpx;
        z-index: 2004;
      }
      .merchant {
        text-shadow: 0px 2rpx 7rpx rgba(0, 0, 0, 0.5);
        margin-top: 10rpx;
        font-size: 24rpx;
        z-index: 2004;
      }
    }
    &-image {
      font-size: 24rpx;
      .name {
        position: absolute;
        left: 27rpx;
        bottom: 80rpx;
        background-color: #1d1f24;
        padding: 9rpx 24rpx;
        border-radius: 24rpx;
        color: #fff;
      }
      .username {
        position: absolute;
        right: 98rpx;
        bottom: 14rpx;
      }
      .image {
        position: absolute;
        right: -9rpx;
        bottom: 9rpx;
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        background-color: #1d1f24;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>
